<template>
  <div>
    <home-head></home-head>
    <!-- 首页轮播 -->
    <div class="warp1">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="swipe">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="banner in banners" :key="banner.id">
              <img :src="banner.picUrl" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- /首页轮播 -->
        <!-- 宫格导航 -->
        <van-grid :column-num="3" clickable>
          <van-grid-item
          @click="enterItenLister(cate.id)"
            v-for="cate in cates"
            :key="cate.id"
            :icon="cate.icon"
            :text="cate.name"
          />
        </van-grid>
        <!-- /宫格导航 -->
          <!-- 商品列表，送恋人 -->
          <van-list
            offset="50"
            v-model="loading"
            :finished="finished"
            finished-text="哈哈哈，这波我没了"
            @load="onLoad"
          >
          <flower :items="items" @clickCart="addCart" @clickitem="enterDetail"></flower>
          <!-- /商品列表，送恋人 -->
        </van-list>
      </van-pull-refresh>
    </div>
    <common-tab></common-tab>
  </div>
</template>

<script>
import { fetchCates, fetchBanner, fetchItems, addCart } from 'api'
import CommonTab from '../../components/CommonTab.vue'
import HomeHead from './components/HomeHead.vue'
import Flower from './components/Flower.vue'
import { Toast } from 'vant'
import { isLogin, getToken } from 'utils'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false,
      page: 1,
      pageSize: 5,
      loading: false, // 是否上拉触底
      finished: false // 上拉是否到达最后一页
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanner()
  },
  methods: {
    // 点击加入购物车
    addCart ({ id }) {
      if (!isLogin()) {
        Toast.fail({
          message: '请登录',
          duration: 1000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      } else {
        addCart({
          goodsId: id,
          number: 1,
          token: getToken()
        }).then(res => {
          console.log(res)
          Toast.success({
            message: '加入成功',
            duration: 1000
          })
          this.$store.commit('cart/set_items', res.data.data.items)
        })
      }
    },
    // 点击进入列表页
    enterItenLister (id) {
      this.$router.push({
        path: '/list',
        query: {
          id
        }
      })
    },
    // 点击进入详情页
    enterDetail ({ id }) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    // 上拉加载
    onLoad () {
      this.fetchItems()
      // console.log(111)
      this.page++
    },
    // 下拉刷新
    onRefresh () {
      this.page = 1
      this.items = []
      this.finished = false
      // 下拉刷新重新请求数据
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then((res) => {
        // console.log(res)
        // 下拉loading在转 为true 此时loading 要为false 才能回去，结束转的状态
        this.isLoading = false
        if (res.data.code === 700) {
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
      })
    },
    fetchBanner () {
      fetchBanner().then((res) => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    fetchCates () {
      fetchCates().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  },
  components: { CommonTab, HomeHead, Flower }
}
</script>

<style lang="scss" scoped>
.warp1 {
  // padding-top: 54px;
  // padding-bottom: 50px;
  position: fixed;
  top: 46px;
  bottom: 50px;
  left: 0;
  right: 0;
  overflow: auto;
  .swipe {
    .my-swipe {
      img {
        width: 100%;
      }
    }
  }
}
</style>
